<template>
  <div>
    <a-form v-show="type === 'form'" :form="form" labelAlign="left" @submit="handelSubmit">
      <p class="title">市住房和城乡建设局意见</p>
      <a-form-item>
        <div class="a-flex a-flex-wrap">
          <span>经核准相关证明材料和公示后，该申请家庭</span>
          <div class="m-x-10">
            <a-select
              v-decorator="['CityVfyResult', { rules: [{ required: true, message: '请选择审核结果!' }] }]"
              size="small"
              placeholder="未审核"
              allowClear
              :options="options"
              style="width: 130px"
            >
            </a-select>
          </div>
          <span>贵阳市人民政府公布的公共租赁住房保障条件</span>
        </div>
      </a-form-item>
      <a-form-item label="备注" :labelCol="{ span: 2 }" :wrapperCol="{ span: 14 }">
        <a-textarea v-decorator="['CityVfyRemark']" :auto-size="{ minRows: 2, maxRows: 4 }" />
      </a-form-item>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="经办人" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-input v-decorator="['CityVfyAgent']" disabled></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="审核时间" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-input v-decorator="['CityVfyDate']" disabled></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item style="text-align: right" :wrapperCol="{ span: 24 }">
        <y-button type="primary" shape="round" html-type="submit">确定提交</y-button>
        <y-button type="default" plain shape="round" @click="handleReset">取消提交</y-button>
      </a-form-item>
    </a-form>
    <a-space v-show="type === 'info'" direction="vertical">
      <p class="title">市住房和城乡建设局意见</p>
      <p>
        经核准相关证明材料和公示后，该申请家庭
        <span class="result" :class="data.CityVfyResult === '符合' ? 'text-success' : 'text-error'">{{
          data.CityVfyResult
        }}</span>
        贵阳市人民政府公布的公共租赁住房保障条件
      </p>
      <p v-if="data.CityVfyRemark">备注：{{ data.CityVfyRemark }}</p>
      <p>经办人：{{ data.CityVfyAgent }}&ensp;&ensp;&ensp;审核日期：{{ data.CityVfyDate | moment('YYYY-MM-DD') }}</p>
    </a-space>
    <a-modal v-if="visible" title="提示" :visible="true" :closable="false" :width="800">
      <template slot="footer">
        <a-button key="submit" type="primary" @click="handleOk"> 确 定 </a-button>
      </template>
      <div>
        <div style="color: #ff5722; margin: 8px 0; text-align: center">
          该户成员中存在退出占用公租房现象，系统将自动将该户连接至占用房源，请点击确认
        </div>
        <div style="margin-top: 20px">
          <p>房屋编号：{{ data.OldEsitesID }}</p>
          <p>房屋地址：{{ addressInfor[0].substring(0, addressInfor[0].length - 2) }}</p>
          <p>面积：{{ addressInfor[1].substring(0, addressInfor[1].length - 2) }}</p>
          <p>户型：{{ addressInfor[2] }}</p>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { postProposerExamine } from '@/api/common'
import { getHousesCountSJ, postSubMainHouses } from '@/api/cityReviewAndManage'

export default {
  props: {
    type: {
      type: String,
      default: 'form',
    },
  },
  inject: ['proposerData', 'handleClose'],
  computed: {
    data() {
      return this.proposerData()
    },
    addressInfor() {
      // 占用公租房现象信息解析
      const addressStarIndex = this.data.OldEsitesInfo.indexOf(')') + 1
      const addressStr = this.data.OldEsitesInfo.substring(addressStarIndex)
      return addressStr.split('：')
    },
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler(n, o) {
        if (!this.$isEmpty(n)) {
          // 家庭成员与保障人员所有身份证
          const IDCardArr = []
          for (let i = 0; i < n.proposerdetail.length; i++) {
            IDCardArr.push(n.proposerdetail[i].IDCards)
          }
          for (let i = 0; i < n.proposerfdetail.length; i++) {
            IDCardArr.push(n.proposerfdetail[i].FIDCard)
          }
          // 查不动产信息
          this.hasHouse(IDCardArr.join(','))
          if (this.type === 'form') {
            const { CityVfyReport, CityVfyResult } = n
            if (!this.$isEmpty(CityVfyResult) && CityVfyResult !== '未审核') {
              this.form.setFieldsValue({
                CityVfyResult,
                CityVfyRemark: CityVfyReport,
              })
            }
          }
        }
      },
    },
  },
  data() {
    return {
      visible: false, // 占用公租房现象弹窗
      form: this.$form.createForm(this, { name: 'cityOpinion' }),
      options: [
        {
          value: '未审核',
          label: '未审核',
        },
        {
          value: '符合',
          label: '符合',
        },
        {
          value: '不符合',
          label: '不符合',
        },
      ],
    }
  },
  mounted() {
    if (this.type === 'form') {
      this.setDefault()
    }
  },
  methods: {
    // 设置默认值
    setDefault() {
      this.$nextTick(() => {
        this.form.setFieldsValue({
          CityVfyAgent: this.$store.getters.nickname,
          CityVfyDate: moment(new Date()).format('YYYY-MM-DD'),
        })
      })
    },
    // 提交占用公租房
    handleOk() {
      postSubMainHouses({
        State: 'update',
        HousesID: this.data.OldEsitesID,
        ProposerID: this.data.ID,
        UserID: this.$store.getters.userid,
        UserName: this.$store.getters.nickname,
      }).then((res) => {
        this.visible = false
      })
    },
    hasHouse(idCard) {
      const that = this
      if (this.$route.params.type !== 'city') return
      this.$loading.show({
        tip: '不动产比对中，请稍后...',
      })
      getHousesCountSJ({
        idcards: idCard,
      })
        .then((res) => {
          this.$info({
            title: '提示',
            content: res[0].state == 0 ? '不动产比对无房' : '不动产比对该户有房请核对！',
            onOk() {
              // 打开条件为市级，且OldEsitesInfo、OldEsitesID不为空
              if (
                // sessionStorage.getItem('jumpType') === 'SHIJI' &&
                !that.$isEmpty(that.data.OldEsitesInfo) &&
                !that.$isEmpty(that.data.OldEsitesID)
              ) {
                that.visible = true
              }
            },
          })
        })
        .finally(() => {
          this.$loading.hide()
        })
    },
    handelSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$loading.show({
            tip: '提交中，请稍后...',
          })
          const { CityVfyAgent, CityVfyDate, CityVfyResult, CityVfyRemark } = values
          postProposerExamine({
            State: 'CityReceiveAudit',
            ProposerModules: {
              ID: this.$route.params.id,
              CityVfyReport: CityVfyRemark,
              CityVfyRemark,
              CityVfyAgent,
              CityVfyDate,
              CityVfyResult,
              LastAlterDate: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
              LastAlterUserID: this.$store.getters.userid,
            },
          })
            .then((res) => {
              this.$emit('submit')
            })
            .finally(() => {
              this.$loading.hide()
            })
        }
      })
    },
    handleReset() {
      this.form.resetFields(['CityVfyResult', 'CityVfyRemark'])
      this.handleClose()
    },
  },
}
</script>
<style scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}
.result {
  font-size: large;
  padding: 0 10px;
  font-weight: bold;
}
</style>
